<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    canvas{border: solid 1px black;}
  </style>
</head>
<body>
  <canvas id="cvs1" width="400" height="200"></canvas>
  <canvas id="cvs2" width="400" height="200"></canvas>
</body>
<script>

  const cvs1 = document.querySelector("#cvs1");
  const c2d = cvs1.getContext("2d");

  c2d.moveTo(50, 50);
  c2d.lineTo(150, 150);
  c2d.lineTo(250, 50);

  c2d.lineWidth = 20;

  // 线的连接点样式

  // 斜角
  // c2d.lineJoin = "bevel";
  // 圆角
  // c2d.lineJoin = "round";
  // 尖角
  // c2d.lineJoin = "miter";

  c2d.stroke();

  // ======

  const cvs2 = document.querySelector("#cvs2");
  const cxt = cvs2.getContext("2d");

  cxt.beginPath();
  cxt.moveTo(100, 50);
  cxt.lineTo(300, 50);
  cxt.lineWidth = 20;
  // 设置线段两端的样式：圆
  cxt.lineCap = "round";
  cxt.stroke();
  
  cxt.beginPath();
  cxt.moveTo(100, 100);
  cxt.lineTo(300, 100);
  // 设置线段两端的样式：无
  cxt.lineCap = "butt";
  cxt.stroke();
  
  cxt.beginPath();
  cxt.moveTo(100, 150);
  cxt.lineTo(300, 150);
  // 设置线段两端的样式：方
  cxt.lineCap = "square";
  cxt.stroke();



  
</script>
</html>